<%--
  Created by IntelliJ IDEA.
  User: 18306
  Date: 2020/11/13
  Time: 21:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath(); %>

<!DOCTYPE HTML>
<html><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>简历预览-我的简历-拉勾网-最专业的互联网招聘平台</title>
    <meta content="23635710066417756375" property="qc:admins">
    <meta name="description" content="拉勾网是3W旗下的互联网领域垂直招聘网站,互联网职业机会尽在拉勾网">
    <meta name="keywords" content="拉勾,拉勾网,拉勾招聘,拉钩, 拉钩网 ,互联网招聘,拉勾互联网招聘, 移动互联网招聘, 垂直互联网招聘, 微信招聘, 微博招聘, 拉勾官网, 拉勾百科,跳槽, 高薪职位, 互联网圈子, IT招聘, 职场招聘, 猎头招聘,O2O招聘, LBS招聘, 社交招聘, 校园招聘, 校招,社会招聘,社招">

    <meta content="QIQ6KC1oZ6" name="baidu-site-verification">

    <!-- <div class="web_root"  style="display:none">h</div> -->
    <script type="text/javascript">
var ctx = "h";
console.log(1);
    </script>
    <link href="h/images/favicon.ico" rel="Shortcut Icon">
    <link href="/static/css/style.css" type="text/css" rel="stylesheet">
    <link href="/static/css/colorbox.min.css" type="text/css" rel="stylesheet">
    <link href="/static/css/popup.css" type="text/css" rel="stylesheet">

    <script type="text/javascript" src="/static/js/jquery.1.10.1.min.js"></script>

    <script src="/static/js/jquery.colorbox-min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $("body").on("click","a.btn_s",function(){
                $.colorbox.close();
                parent.jQuery.colorbox.close();
            });
            $(".inline").colorbox({
                inline:true
            });
        });
    </script>
    <script src="/static/js/ajaxCross.json" charset="UTF-8"></script></head>

<body>

<div id="previewWrapper">
    <div class="preview_header">
        <h1 title="">jason的简历</h1>
        <a title="下载简历" class="inline cboxElement" href="#downloadOnlineResume">下载该简历</a>

    </div><!--end .preview_header-->

    <div class="preview_content">
        <div class="profile_box" id="basicInfo">
            <h2>基本信息</h2>
            <div class="basicShow">
                   <span>${requestScope.resume.user.name}|${requestScope.resume.user.sex}|${requestScope.resume.user.workExperience.name}工作经验<br>
                    ${requestScope.resume.user.eduExperience.education.name}· ${requestScope.resume.user.eduExperience.schoolName}<br>
            		电话：${requestScope.resume.user.phone}
            		</span>
                <div class="m_portrait">
                    <div></div>
                    <img width="120" height="120" alt="jason" src="/static/images/default_headpic.png">
                </div>
            </div><!--end .basicShow-->
        </div><!--end #basicInfo-->

        <div class="profile_box" id="expectJob">
            <h2>期望工作</h2>
            <div class="expectShow">
                期望职位：${requestScope.resume.expectationList.get(0).postion.name}<br>
                期望地点： ${requestScope.resume.expectationList.get(0).city1.name}<br>
                期望薪资： ${requestScope.resume.expectationList.get(0).salary.name}<br>
                工作性质：  ${requestScope.resume.expectationList.get(0).kind.name}
            </div><!--end .expectShow-->
        </div><!--end #expectJob-->

        <div class="profile_box" id="educationalBackground">
            <h2>工作经历</h2>
            <div class="educationalShow">
                <ul class="elist clearfix">
                    <c:forEach items="${requestScope.resume.workExperienceList}" var="workExperience">
                        <li class="clear">
                            <span class="c9"><fmt:formatDate value="${workExperience.entryTime}" pattern="yyyy"/>
                                                 -<fmt:formatDate value="${workExperience.resignTime}" pattern="yyyy"/></span>
                            <div style=" width: 500px; height:35px;line-height: 35px;text-align: center">
                                <h4 style="font-size: 18px">${workExperience.companyName}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                                <h4 style="font-size: 18px">${workExperience.positionName}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                                <h4 style="font-size: 18px">${workExperience.salary.name}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                            </div>
                        </li>
                    </c:forEach>
                </ul>

            </div><!--end .educationalShow-->
        </div><!--end #educationalBackground-->

<%--        <div class="profile_box" id="projectExperience">--%>
<%--            <h2>项目经验</h2>--%>
<%--            <div class="projectShow">--%>
<%--                <ul class="plist clearfix">--%>
<%--                    <li class="noborder">--%>
<%--                        <div class="projectList">--%>
<%--                            <div class="f16 mb10">微盟，jason--%>
<%--                                <span class="c9">--%>
<%--		            									            								（2013.06-至今）--%>
<%--		            									            						</span>--%>
<%--                            </div>--%>
<%--                            <div class="dl1"></div>--%>
<%--                        </div>--%>
<%--                    </li>--%>
<%--                </ul>--%>
<%--            </div><!--end .projectShow-->--%>
<%--        </div><!--end #projectExperience-->--%>

        <div class="profile_box" id="educationalBackground">
            <h2>教育背景</h2>
            <div class="educationalShow">
                <ul class="elist clearfix">
                    <c:forEach items="${requestScope.resume.eduExperienceList}" var="eduExperience">
                    <li class="clear">
                        <span class="c9"><fmt:formatDate value="${eduExperience.entryTime}" pattern="yyyy"/>
                                -<fmt:formatDate value="${eduExperience.graductionTime}" pattern="yyyy"/></span>
                        <div style=" width: 500px; height:35px;line-height: 35px;text-align: center">
                            <h4 style="font-size: 18px">${eduExperience.schoolName}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                            <h4 style="font-size: 18px">${eduExperience.profession}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                            <h4 style="font-size: 18px">${eduExperience.education.name}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                            <h4 style="font-size: 18px">${eduExperience.fulltime.name}&nbsp;&nbsp;&nbsp;&nbsp;</h4>
                        </div>
                    </li>
                    </c:forEach>
                </ul>

            </div><!--end .educationalShow-->
        </div><!--end #educationalBackground-->

        <div class="profile_box" id="selfDescription">
            <h2>自我描述</h2>
            <div class="descriptionShow">
                    ${resume.introduction}
            </div><!--end .descriptionShow-->
        </div><!--end #selfDescription-->

<%--        <div class="profile_box" id="worksShow">--%>
<%--            <h2>作品展示</h2>--%>
<%--            <div class="workShow">--%>
<%--                <ul class="slist clearfix">--%>
<%--                    <li class="noborder">--%>
<%--                        <div class="workList c7">--%>
<%--                            <div class="f16">网址：<a target="_blank" href="http://www.weimob.com">http://www.weimob.com</a></div>--%>
<%--                            <p>产品 </p>--%>
<%--                        </div>--%>
<%--                    </li>--%>
<%--                </ul>--%>
<%--            </div><!--end .workShow-->--%>
<%--        </div><!--end #worksShow-->--%>
    </div><!--end .preview_content-->
</div><!--end #previewWrapper-->

<!-------------------------------------弹窗lightbox ----------------------------------------->
<div style="display:none;">
    <!-- 下载简历 -->
    <div class="popup" id="downloadOnlineResume">
        <table width="100%">
            <tbody><tr>
                <td class="c5 f18">请选择下载简历格式：</td>
            </tr>
            <tr>
                <td>
                    <a class="btn_s" href="">word格式</a>
                    <a class="btn_s" href="">html格式</a>
                    <a class="btn_s" href="">pdf格式</a>
                </td>
            </tr>
            </tbody></table>
    </div><!--/#downloadOnlineResume-->
</div>
<!------------------------------------- end ----------------------------------------->
<div id="cboxOverlay" style="display: none;"></div><div id="colorbox" class="" role="dialog" tabindex="-1" style="display: none;"><div id="cboxWrapper"><div><div id="cboxTopLeft" style="float: left;"></div><div id="cboxTopCenter" style="float: left;"></div><div id="cboxTopRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxMiddleLeft" style="float: left;"></div><div id="cboxContent" style="float: left;"><div id="cboxTitle" style="float: left;"></div><div id="cboxCurrent" style="float: left;"></div><button type="button" id="cboxPrevious"></button><button type="button" id="cboxNext"></button><button id="cboxSlideshow"></button><div id="cboxLoadingOverlay" style="float: left;"></div><div id="cboxLoadingGraphic" style="float: left;"></div></div><div id="cboxMiddleRight" style="float: left;"></div></div><div style="clear: left;"><div id="cboxBottomLeft" style="float: left;"></div><div id="cboxBottomCenter" style="float: left;"></div><div id="cboxBottomRight" style="float: left;"></div></div></div><div style="position: absolute; width: 9999px; visibility: hidden; display: none;"></div></div></body></html>

<a id="downLoad" href="javascript:void(0)">点击下载pdf</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script type="text/javascript">
    var downPdf = document.getElementById("downLoad");

    downPdf.onclick = function() {
        downPdf.parentNode.removeChild(downPdf);
        html2canvas(document.getElementById("previewWrapper"), {
            onrendered:function(canvas) {

                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 570;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //pdf页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 592.28;
                var imgHeight = 570/contentWidth * contentHeight;

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }

                pdf.save('content.pdf')

            }
        })
    }
</script>